<template>
  <div class="addincomedata">
    <!-- 立即搜索 -->
    <div class="search-list">
      <input
        v-model="search"
        placeholder="客户名称、联系人、手机号码"
        class="search-input"
      />
      <button type="button" class="search-btn">立即搜索</button>
    </div>
    <!-- 展开高级搜索 -->
    <div class="higinsearch-btn">
      <button type="button" class="el-icon-search" @click="upState">{{closeSearch}}</button>
    </div>
    <SearchItem v-if="state" ></SearchItem>
    <!-- 提示 -->
    <div class="tips">1单击选中客户>>2录入信息</div>
    <!-- 关联客户 -->
    <div class="concat">
      <div class="el-icon-d-arrow-right" @click="setMsg">无关联客户点此处</div>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" height="565px" @row-click="getData">
      <!-- 表格数据渲染 -->
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
        width="150"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path: item.url, query: { detailmsg: scope.row } }"
            v-if="item.isRouter"
            >{{ scope.row[titleList[item.id]] }}
          </router-link>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import SearchItem from"../components/SearchItem.vue";

export default {
  name: "AddIncomeData",
  components: {
    SearchItem,
  },
  data() {
    return {
      search: "", 
      state: false,
      closeSearch: '展开高级搜索',
      
      titleList: [
        "customname",
        "customtype",
        "concatperson",
        "phone",
        "QQ",
        "inputtime",
        "salesman",
      ],
      linklist: [
        {
          id: 0,
          name: "客户名称",
          isRouter: true,
          url: '/money/addinoutcome',
        },
        {
          id: 1,
          name: "客户类型",
          isRouter: false,
        },
        {
          id: 2,
          name: "联系人",
          isRouter: false,
        },
        {
          id: 3,
          name: "手机号码",
          isRouter: false,
        },
        {
          id: 4,
          name: "QQ",
          isRouter: false,
        },
        {
          id: 5,
          name: "录入时间",
          isRouter: false,
        },
        {
          id: 6,
          name: "业务员",
          isRouter: false,
        }
      ],
    };
  },
  props: {
    tableData: Array,
    currentpage: Number,
  },
  methods: {
    upState() {
      if(!this.state) {
        this.closeSearch = '关闭高级搜索'
      } else {
        this.closeSearch = '展开高级搜索'
      }
      this.state = !this.state
      
    },
    setMsg() {
      this.$emit('setmsg')
    },
    getData(row) {
      this.$emit("jumpinoutcome", row);
    },
  }
};
</script>

<style>
.search-list {
  width: 99%;
  background: rgb(239, 240, 239);
  border-radius: 5px;
  height: 50px;
  margin: 20px auto 0px;
  line-height: 50px;
  text-align: center;
}
.search-input {
  height: 40px;
  width: 300px;
  border: 1px solid #bfbfbf;
  outline: none;
  display: inline-block;
  margin-right: 10px;
}
.search-btn {
  height: 40px;
  width: 80px;
  outline: none;
  border: none;
  border-radius: 5px;
  background: rgb(64, 158, 255);
  color: #fff;
}
.el-icon-search {
  margin: 0 auto;
  background: rgb(245, 108, 108);
  border: rgb(245, 108, 108);
  height: 30px;
  width: 120px;
  color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.higinsearch-btn {
  text-align: center;
}
.tips {
  border: 1px dashed #bfbfbf;
  color: red;
  width: 230px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  margin: 20px auto;
}
/* 关联客户 */
.concat {
  width: 100%;
  height: 50px;
  background: rgb(64, 158, 255);
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: bolder;
}
</style>